<template>
	<el-dialog :close-on-click-modal="false" :title="parameter.id ? ' 编辑' : '添加'" :visible.sync="show" width="45%" v-loading="loading">
		<el-form ref="form" :model="request.data" :inline="true" label-width="80px" :rules="rules">
			<el-row>
				<el-col :span="12">
					<el-form-item label="姓名" prop="name"><el-input v-model="request.data.name" autocomplete="off"></el-input></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="登录名" prop="lname"><el-input v-model="request.data.lname" autocomplete="off"></el-input></el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="角色"><select-tree :items="roles" :checkedIds="[request.data.rid]" :defaultParent="0" @nodeClick="changeRole"></select-tree></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="email" prop="email"><el-input v-model="request.data.email" autocomplete="off"></el-input></el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="手机" prop="mobile"><el-input v-model="request.data.mobile" autocomplete="off"></el-input></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性别">
						<el-select v-model="request.data.sex" placeholder="请选择">
							<el-option label="男" :value="1"></el-option>
							<el-option label="女" :value="2"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="生日">
						<el-date-picker v-model="request.data.birth" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="submitForm('form')" v-hasPermission="parameter.id ? '000000000005' : '000000000000'">确 定</el-button>
			<el-button @click="show = false">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
import utils from 'util/utils.js';
import validate from 'util/validate.js';
import api from 'api/system/user/user.js';

import selectTree from 'components/selectTree/selectTree.vue';

export default {
	name: 'edit',
	components: {
		selectTree
	},
	data() {
		return {
			isDisabled: false,
			loading: false,
			show: this.isDisplay,
			roles: [],
			request: utils.newRequest(),
			rules: {
				name: [
					{
						validator: validate.required,
						trigger: 'blur'
					},
					{
						validator: validate.length,
						min: 0,
						max: 50,
						trigger: 'blur'
					}
				],
				lname: [
					{
						validator: validate.required,
						trigger: 'blur'
					},
					{
						validator: validate.length,
						min: 0,
						max: 50,
						trigger: 'blur'
					}
				],
				email: [
					{
						validator: validate.required,
						trigger: 'blur'
					},
					{
						validator: validate.email,
						trigger: 'blur'
					}
				],
				mobile: [
					{
						validator: validate.required,
						trigger: 'blur'
					},
					{
						validator: validate.phone,
						trigger: 'blur'
					}
				]
			}
		};
	},
	methods: {
		//提交表单
		submitForm(formName) {
			utils.checkForm(this.$refs[formName], () => {
				this.loading = true;
				if (this.parameter.id) {
					//编辑
					api.update(
						this.request,
						response => {
							utils.msg.success(response.msg);
							this.loading = false;
							this.show = false;
							this.$parent.list();
						},
						response => {
							utils.msg.warning(response.msg);
							this.loading = false;
						}
					);
				} else {
					//添加
					api.save(
						this.request,
						response => {
							utils.msg.success(response.msg);
							this.loading = false;
							this.show = false;
							this.$parent.list();
						},
						response => {
							utils.msg.warning(response.msg);
							this.loading = false;
						}
					);
				}
			});
		},
		//下拉树选择的回调函数
		changeRole(rid) {
			this.request.data.rid = rid[0];
		},
		init() {
			this.request = utils.newRequest();
			if (this.parameter.id) {
				//编辑
				this.request.param.id = this.parameter.id;
				api.toUpdate(this.request, response => {
					this.request.data = response.data.user;
					this.roles = response.data.roles;
				});
			} else {
				//添加
				api.toSave(null, response => {
					this.roles = response.data.roles;
				});
			}
		}
	},
	props: {
		isDisplay: {
			type: Boolean,
			default() {
				return false;
			}
		},
		parameter: {
			type: Array | Object,
			default() {
				return {};
			}
		}
	},
	watch: {
		isDisplay(val) {
			this.show = val;
			if (val) {
				this.init();
			}
		},
		show(val) {
			this.$emit('update:isDisplay', val);
		},
		parameter(val) {
			this.parameter = val;
		}
	}
};
</script>

<style lang="scss"></style>
